<template>
  <div class="shop">
    <comRNav title="购物车" />
    <div class="center">
      <div v-if="goodslist.length == 0">
        <div class="shop-a">
          <img src="../assets/shopping-cart/1.png" alt="">
        </div>
        <div class="shop-b">
          <p>购物车是空的</p>
        </div>
      </div>
      <div v-if="goodslist.length != 0" class="goodslist">

        <div class="commodity">
          <!-- 全选 -->
          <div class="shop-c">
            <span class="shopCartPayC">
              <input id="shopCartCIdC1" v-model="allSelect" @change="selectAll" class="shopCartC" type="checkbox"
                shoppingcarttype="cny">
            </span>
            <p>百丽优购</p>
          </div>
        </div>
        <div v-for="(item,index) in goodslist" :key="index">
          <div class="title">
            <p>
              {{item.gname}}
            </p>
          </div>
          <div class="product">
            <div class="product-a">
              <span class="shopCartPayC">
                <input id="shopCartCIdC1" v-model="item.checked" @change="backAll" class="shopCartC" type="checkbox"
                  shoppingcarttype="cny">
              </span>
            </div>
            <div class="img">
              <div class="img-a">
                <!-- 主图 -->
                <img :src="item.picture" alt="">

              </div>
              <!-- 活动
              <div class="img-b">
                <img :src="item.img2" alt="">
              </div> -->
            </div>
            <div class="details">
              <ul class="box">
                <!-- 颜色 -->
                <li class="box1">颜色:{{item.color}}
                  <!-- 单价 -->
                  <span>{{item.nprice}}</span>
                </li>
                <li class="box2">尺码:{{item.size}}</li>
                <li class="box2">发货:百丽优购</li>
                <li class="box3">
                  <td><input type="button" value="-" :disabled="item.num==0" @click="reduceNum(index)"> {{item.num}}
                    <input type="button" value="+" @click="addNum(index)"></td>
                  <span class="box4" type="button" @click="deleteGood(index,item)">
                    <img src="../assets/shopping-cart/2.png" alt="">
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="end">
      <div class="end2">
        <span class="shopCartPayC">
          <input id="shopCartCIdC1" v-model="allSelect" @change="selectAll" class="shopCartC" type="checkbox"
            shoppingcarttype="cny">
        </span>
        <p>全部</p>
      </div>
      <div class="end1">
        <p>总计: <span>{{totalMoney}}</span>（不包含运费）</p>
      </div>
      <div class="end3">去结算<span>{{totalNum}}</span></div>
    </div>
  </div>
</template>

<script>
import comRNav from "../components/comRNav";

import { Dialog } from "vant";
import { cartList, deleteList } from "../utils/cart";
export default {
  name: "shopping-cart",
  data() {
    return {
      allSelect: false,
      money: 0,
      goodslist: [
        {
          checked: false,
          name: "Nike耐克2020年新款男子AS .....",
          img: require("../assets/Adidas/2.jpg"),
          img2: require("../assets/shopping-cart/6.png"),
          color: "颜色：黑/灰",
          price: "667",
          size: "尺码:S",
          brand: "发货:百丽优购",
          num: "5"
        },
        {
          checked: false,
          name: "Nike耐克2020年新款男子AS .....",
          img: require("../assets/Adidas/2.jpg"),
          img2: require("../assets/shopping-cart/6.png"),
          color: "颜色：黑/灰",
          price: "667",
          size: "尺码:S",
          brand: "发货:百丽优购",
          num: "5"
        },
        {
          checked: false,
          name: "Nike耐克2020年新款男子AS .....",
          img: require("../assets/Adidas/2.jpg"),
          img2: require("../assets/shopping-cart/6.png"),
          color: "颜色：黑/灰",
          price: "667",
          size: "尺码:S",
          brand: "发货:百丽优购",
          num: "5"
        },
        {
          checked: false,
          name: "Nike耐克2020年新款男子AS .....",
          img: require("../assets/Adidas/2.jpg"),
          img2: require("../assets/shopping-cart/6.png"),
          color: "颜色：黑/灰",
          price: "667",
          size: "尺码:S",
          brand: "发货:百丽优购",
          num: "5"
        }
      ]
    };
  },
  computed: {
    totalNum() {
      let num = 0;
      this.goodslist.forEach(item => {
        if (item.checked) {
          num += Number(item.num);
        }
      });
      return num;
    },
    totalMoney() {
      let money = 0;
      this.goodslist.forEach(item => {
        if (item.checked) {
          money += item.price * item.num;
        }
      });
      return money;
    }
  },
  methods: {
    //减少
    reduceNum(i) {
      this.goodslist[i].num--;
    },
    //增加
    addNum(i) {
      this.goodslist[i].num++;
    },
    //全选
    selectAll() {
      this.goodslist.forEach(item => (item.checked = this.allSelect));
    },
    //反向判断全选
    backAll() {
      this.allSelect = this.goodslist.every(item => item.checked == true);
    },
    //删除
    deleteGood(i, item) {
      Dialog.confirm({
        title: "提示",
        message: "您确定删除吗？"
      })
        .then(() => {
          deleteList({
            uid: item.uid,
            gid: item.gid,
            sid: item.sid,
            cid: item.cid
          }).then(res => {
            this.goodslist.splice(i, 1);
          });
        })
        .catch(() => {});
    }
  },
  components: {
    comRNav
  },
  created() {
    cartList({
      uid: localStorage.getItem("uid")
    }).then(res => {
      console.log(res);
      let arr = [];
      res.forEach(item => {
        item.checked = false;
      });

      this.goodslist = res;
      console.log(this.goodslist, 111);
    });
  }
};
</script>

<style lang="scss" scoped>
.shop {
  height: 100vh;
  // background-color: #f4f4f4;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
}
.center {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  // height: 520px;
  // background-color: red;
}
.shop-a {
  width: 60px;
  height: 44px;
  margin: 0 auto;
  margin-top: 50px;
}
.shop-a img {
  width: 100%;
}
.shop-b {
  width: 100%;
  height: 16px;
  color: #666666;
  text-align: center;
  margin-top: 10px;
}
.commodity {
  height: 38px;
  position: relative;
  // margin-top: 8px;
  border-top: 1px solid #e3e5e9;
  background: #f5f5f5;
  font-size: 14px;
  color: #333;
  padding-top: 8px;
}
.shop-c {
  width: 106px;
  // background-color: red;
  margin-left: 10px;
  display: flex;
}
.shopCartC {
  width: 20px;
  height: 20px;
  /* background: #fff; */
  border: 1px solid #666;
  border-radius: 50%;
  // display: none;
}
.shop-c p {
  width: 70px;
  height: 16px;
  margin-left: 10px;
  font-size: 16px;
}
.shopCartPayC {
  width: 20px;
  height: 20px;
  /* background: #fff; */
  // border: 1px solid #666;
  border-radius: 50%;
}
.title {
  // height: 30px;
  // background-color: red;
  text-align: center;
  // line-height: 30px;
  margin-top: 20px;
}
.title p {
  font-size: 15px;
  padding-left: 30px;
}

.product {
  width: 100%;
  height: 140px;
  //  background-color: pink;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.img {
  width: 110px;
  height: 130px;
  // background-color: blue;
  margin-left: 10px;
}
.img-a {
  width: 97px;
  height: 97px;
  margin-left: 5px;
}
.img-a img {
  width: 100%;
}
.img-b {
  width: 97px;
  height: 15px;
  margin-left: 5px;
}
.img-b img {
  width: 100%;
}
.details {
  width: 210px;
  height: 100px;
  // background: yellow;
  line-height: 25px;
  font-size: 15px;
  margin-top: 10px;
}
.box {
  width: 210px;
  height: 100px;
}
.box .box1 {
  width: 210px;
  display: flex;
  justify-content: space-between;
}
.box .box3 {
  width: 210px;
  display: flex;
  justify-content: space-between;
}
.box3 td {
  height: 16ox;
  border: 1px solid black;
}
.box3 td input {
  width: 40px;
  height: 30px;
  border: none;
}
.box .box4 {
  width: 25px;
  height: 31px;
}
.box .box4 img {
  width: 100%;
}
.product-a {
  margin-top: 50px;
}

.end {
  width: 100%;
  height: 50px;
  // background-color: pink;
  display: flex;
  justify-content: space-around;
  z-index: 1;
  position: absolute;
  bottom: 0;
  background-color: #ffff;
}
.end1 {
  height: 50px;
  // background-color: blue;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}
.end2 {
  // width: 20px;
  height: 50px;
  display: flex;
  margin-top: 16px;
  margin-left: 5px;
}
.end2 p {
  margin-left: 5px;
}
.end3 {
  width: 115px;
  height: 50px;
  background-color: red;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
}
</style>